<template>
  <div class="learnIndex">
    <div class="top"></div>
    <div class="content1 shadow">
      <div class="content1">
        <p>{{data.test_info.title}}</p>
        <div class="box">
          <div>
            <p>
              考卷总分:
              <span>{{data.test_info.fraction}}分</span>
            </p>
            <p>
              总题目数:
              <span>{{data.test_info.question_num}}题</span>
            </p>
          </div>
          <div>
            <p>
              及格分数:
              <span>{{data.test_info.pass_grade}}分</span>
            </p>
            <p>
              考试时长:
              <span>{{Math.floor(data.test_info.duration/60) }}分钟</span>
            </p>
          </div>
        </div>

        <div class="box2">
          <p>考试时间：</p>
          <div>
            <p>{{data.exam_scene&&data.exam_scene.start_time | time }}</p>
            <span>&nbsp;至 &nbsp;</span>
            <p>{{data.exam_scene&&data.exam_scene.close_time | time }}</p>
          </div>
        </div>

        <div class="btn" @click="answer()">
           <span v-if="isOver">开始答题</span>
           <span v-else>查看答题</span>
        </div>

        <div class="des">考试说明：</div>
        <div class="des">1、请参与考试的人员在规定的时间内登录本系统参加考试;</div>
        <div class="des">2、在考试的过程中请认真答题，一旦提交试卷，将不能再更改;</div>
        <div class="des">3、本次考试采用手动和自动提交试卷，在规定时间内需完成答题，若答题时间到，系统会自动提交试卷;</div>
        <div class="des">4、如在考试的过程中遇到系统卡顿，页面无法打开的情况，请重新进入系统考试。有特殊情况请及时与负责人联系</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [],
        isOver:false,
      data: {
        test_info: {
          fraction: "",
          title: "",
          question_num: "",

        }
      }
    };
  },
  mounted() {
        localStorage.removeItem("subject");
      this.isOver = this.$route.query.isOver;
      this.init();
  },
  filters: {
    two: function(e) {
      e = e + "";
      return e.padStart(2, "0");
    }
  },
  methods: {
    init() {
      this.$http
        .get("/applets/Test/test_info", {
          id: this.$route.query.id
        })
        .then(res => {
          this.data = res.data;
          localStorage.setItem("subject", JSON.stringify(res.data));
          this.$progress.done();
        });
    },

    answer() {
        this.$router.replace({
            path: "/learn/answer",
            query: { id: this.data.exam_scene.id,isOver: this.$route.query.isOver,state:this.$route.query.state||false }
        });
    }
  }
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.top {
  position: relative;
  background: url("~@as/img/kaoshi_datiyindao_top@2x.png");
  background-size: 100% auto;
  width: 100%;
  height: 229px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 0;

  .learn {
    color: #fff;
    font-weight: Bold;
    font-size: 28px;
    margin-top: 73px;
    margin-left: 13px;
  }

  .progress {
    margin-left: 16px;
    margin-top: 14px;
    width: 109px;
    height: 22px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      color: #ffe789;
      font-size: 10px;
      margin-right: 7px;
    }
    span {
      font-size: 12px;
      color: #fff;
    }
  }
}

.shadow {
  border-radius: 0 0 8px 8px !important;
  top: 229px;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: -10 !important;
  z-index: 99 !important;
  min-height: 62vh !important;
  box-shadow: 0 4px 5px 1px rgba(0, 0, 0, 0.2);
  width: 92% !important;
  margin-bottom: 23px !important;
}
.loadMoreWrap{
  margin-top: -40px;
}
.content1 {
  z-index: 1;
  background: #fff;
  border-radius: 8px;
  min-height: 70vh;
  width: 100%;
  margin-bottom: -3px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  p {
    margin-top: 40px;
    font-size: 16px;
    font-weight: Medium;
  }
  .box {
    width: 80%;
    display: flex;
    justify-content: space-between;
    margin-top: 38px;
    p {
      margin-top: 0;
      font-size: 14px;
      color: #333;
      span {
        color: #eb4d44;
      }
    }
    p + p {
      margin-top: 15px;
    }
  }

  .box2 {
    margin-top: 29px;
    width: 287px;
    height: auto;
    background: #f8f8f8;
    padding: 15px 0px 15px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;

    p {
      margin-top: 0;
      color: #999;
      font-size: 14px;
    }

    p + p {
      font-size: 14px;
      color: #666;
    }

    div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      * {
        font-size: 14px;
        color: #666;
      }
    }
  }

  .btn {
    margin-top: 34px;
    width: 287px;
    height: 36px;
    background: #f47548;
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-bottom:46px;
  }

  .des {
    width: 80%;
    margin: 0 10%;
    margin-bottom: 8px;
    color: #999;
    font-size: 12px;
    &:last-child{
      margin-bottom: 20px;
    }
  }
}
</style>